<template>
  <div>
    <div id="itemlist_container">
      <p>店铺列表</p>
      <div>
        <el-table :data="list">
          <el-table-column type="expand">
            <template slot-scope="data">
              <div id="tablechild">
                <div>
                  <p>商品ID:{{ data.row.id }}</p>
                  <p>所属分类:{{ data.row.category }}</p>
                  <p>
                    商品图片:
                    <img :src="data.row.imgUrl" />
                  </p>
                  <p>商品评价:{{ data.row.rating }}</p>
                  <p>商品描述:{{ data.row.goodsDesc }}</p>
                </div>
                <div>
                  <p>商品名称:{{ data.row.id }}</p>
                  <p>所属价格:{{ data.row.category }}</p>
                  <p>商品时间:{{ data.row.ctime }}</p>
                  <p>商品销量:{{ data.row.rating }}</p>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="商品名称" prop="name"></el-table-column>
          <el-table-column label="所属分类" prop="category"></el-table-column>
          <el-table-column
            label="商品价值"
            prop="price"
            width="100"
          ></el-table-column>
          <el-table-column label="商品图片" prop="imgUrl">
            <template slot-scope="data">
              <img :src="data.row.imgUrl" />
            </template>
          </el-table-column>
          <el-table-column label="商品描述" prop="goodsDesc"></el-table-column>
          <el-table-column label="操作" width="200">
            <template slot-scope="msg">
              <el-button @click="compile(msg.row)">编辑</el-button>
              <el-button type="danger" @click="clickremove(msg.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <!-- 编辑部分 -->
        <el-dialog title="编辑商品" :visible.sync="dialogVisible" width="35%">
          <div>
            <span>商品名称</span>
            <div>
              <el-input v-model="dialoname" style="width: 300px"></el-input>
            </div>
          </div>
          <div>
            <span>商品分类</span>
            <el-select
              v-model="dialotype"
              placeholder="请选择"
              style="width: 300px"
            >
              <el-option
                v-for="item in options"
                :key="item.cateName"
                :label="item.cateName"
                :value="item.cateName"
              >
              </el-option>
            </el-select>
          </div>
          <div>
            <span>商品价格</span>
            <div>
              <el-input v-model="dialoprice" style="width: 300px"></el-input>
            </div>
          </div>
          <div>
            <span>商品图片</span>
            <el-upload
              class="avatar-uploader"
              action="http://127.0.0.1:5000/goods/goods_img_upload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
          <div>
            <span>商品描述</span>
            <div>
              <el-input
                v-model="goodsdesc"
                type="textarea"
                style="width: 300px"
              ></el-input>
            </div>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="newitem">确 定</el-button>
          </span>
        </el-dialog>

        <!-- 翻页部分 -->
        <div class="itemlist_container_page">
          <el-pagination
            @size-change="sizechange"
            @current-change="pagechange"
            :current-page="curpage"
            :page-sizes="changepagesizes"
            :page-size="curpagesize"
            :total="total"
            layout="total, sizes, prev, pager, next, jumper"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { prolist, dellist, editlist, categories } from "@/apis/items";
export default {
  data() {
    return {
      list: [
        /* category: "(冒菜)套餐自选区"
        ctime: "2020-05-26T03:49:57.000Z"
        goodsDesc: "荤素双人套餐（配米饭两份+饮品两份）\n主要原料：其他"
        id: 113
        imgUrl: "http://127.0.0.1:5000/upload/imgs/goods_img/1590464996752.webp"
        name: "荤素双人套餐（配米饭两份+饮品两份）"
        price: 35.88
        rating: 100
        ratings: "[{\"username\":\"3******c\",\"rateTime\":1469281964000,\"rateType\":0,\"text\":\"很喜欢的粥\",\"avatar\":\"http://static.galileo.xiaojukeji.com/static/tms/default_header.png\"},{\"username\":\"2******3\",\"rateTime\":1469271264000,\"rateType\":0,\"text\":\"\",\"avatar\":\"http://static.galileo.xiaojukeji.com/static/tms/default_header.png\"},{\"username\":\"3******b\",\"rateTime\":1469261964000,\"rateType\":1,\"text\":\"\",\"avatar\":\"http://static.galileo.xiaojukeji.com/static/tms/default_header.png\"}]"
        sellCount: 68 */
      ],
      total: 0,

      curpage: 1,
      changepagesizes: [5, 10, 15],
      curpagesize: 5,

      dialogVisible: false, //编辑框
      dialoname: "", //商品名
      dialotype: "", //商品分类
      dialoprice: "", //价格
      goodsdesc: "", //商品描述
      imageUrl: "", //回显的图片
      dialid: "", //商品id

      options: [], //分类名
    };
  },

  methods: {
    //商品列表
    productlist() {
      prolist({ currentPage: this.curpage, pageSize: this.curpagesize }).then(
        (res) => {
          // console.log(res);
          this.list = res.data.data;
          this.total = res.data.total;
        }
      );
    },

    //编辑商品
    compile(msg) {
      console.log(msg);
      this.dialogVisible = true;
      this.dialid = msg.id;
      this.imageUrl = msg.imgUrl;
      this.dialoname = msg.name;
      this.dialotype = msg.category;
      this.dialoprice = JSON.stringify(msg.price);
      this.goodsdesc = msg.goodsDesc;

      this.newimg = msg.imgUrl.substring(msg.imgUrl.lastIndexOf("/") + 1);
      /* console.log(
        this.dialid,
        this.dialoname,
        this.dialotype,
        this.dialoprice,
        this.goodsdesc,
        this.newimg
      ); */
    },

    handleAvatarSuccess(res, file) {
      console.log(res, file);
      this.newimg = res.imgUrl; //图片上传成功后重新命名的名字
      this.imageUrl = URL.createObjectURL(file.raw);
    },

    //确认编辑修改商品
    newitem() {
      this.dialogVisible = false;
      editlist({
        name: this.dialoname,
        category: this.dialotype,
        price: this.dialoprice,
        imgUrl: this.newimg,
        goodsDesc: this.goodsdesc,
        id: this.dialid,
      }).then((res) => {
        console.log(res);
        if (res.data.code == 0) {
          this.$message({
            message: "修改成功",
            type: "success",
          });
          this.productlist();
        }
      });
    },

    //删除商品
    clickremove(msg) {
      // console.log(msg);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          dellist({ id: msg.id }).then((res) => {
            console.log(res.data.msg);
            this.productlist();
            this.$message({
              message: "删除成功",
              type: "success",
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    //每页显示条数
    sizechange(newsize) {
      // console.log(newsize);
      this.curpagesize = newsize;
      this.productlist();
    },

    //翻页
    pagechange(newpage) {
      // console.log(newpage);
      this.curpage = newpage;
      this.productlist();
    },
  },
  created() {
    this.productlist();
    categories().then((res) => {
      // console.log(res.data.categories);
      this.options = res.data.categories;
    });
  },
};
</script>

<style lang="less" scoped>
#itemlist_container {
  background-color: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding-bottom: 20px;
  p {
    line-height: 50px;
    border-bottom: 1px solid #f4f5f9;
    padding: 0 20px;
    color: #848485;
  }
  .el-table {
    img {
      width: 80px;
      height: 80px;
    }
  }
  #tablechild {
    display: flex;
    div {
      flex: 1;
    }
  }

  .itemlist_container_page {
    margin: 20px 0 0 20px;
  }
  .avatar-uploader,
  .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 80px;
    height: 80px;
    line-height: 80px;
    text-align: center;
  }
  .avatar {
    width: 80px;
    height: 80px;
    display: block;
  }

  .el-dialog {
    div {
      display: flex;
      align-items: center;
      margin-top: 5px;
      span {
        width: 80px;
      }
    }
  }
}
</style>